<template>
	<view class="container">
		<view class="search-box">
			<u-search v-model="params.keywords" placeholder="搜索我的订单" :showAction="false" bgColor="#ffffff" height="62rpx"
				:inputStyle="{fontSize:'32rpx'}" color="#333333" searchIconColor="#FFC046" borderColor="#e9eaea"
				@search="onRefreshData"></u-search>
		</view>
		<view class="tab-order f-a-center">
			<u-tabs :current="currentTab" :list="tabList" keyName="label" lineColor="#FFC046"
				:activeStyle="{ color: '#FFC046',fontSize:'32rpx' }" :inactiveStyle="{fontSize:'32rpx'}"
				:itemStyle="{height:'70rpx',padding:'0 28rpx'}" @click="changeTab"></u-tabs>
		</view>


		<view class="order-list">
			<view class="order-item" v-for="(item,i) in orderList" :key="i" @click="goDetails(item.order_no)">
				<view class="item-top">
					<view class="order">订单号：{{item.order_no}}</view>
				</view>
				<view class="comp-product" v-for="goods in item.goods" :key="goods.goods_id">
					<orderProduct :goods="goods"></orderProduct>
				</view>
				<view class="item-total f-a-center f-j-end">
					共{{item.total_num}}件商品，合计<span class="price">¥{{item.total_price}}</span>
				</view>
				<view class="item-btns f-j-end">
					<template v-if="item.status==0"><!-- 待支付 -->
						<button class="btn link" @click.stop="cancelOrder(item)">取消订单</button>
						<button class="btn" @click.stop="goPay(item)">去付款</button>
					</template>
				</view>
			</view>
		</view>
		<u-loadmore line :status="loadStatus" />

		<myModal :show="cancel.show" title="提示" content="确定要取消该订单吗？" @cancel="cancel.show=false" @confirm="confirmCancel">
		</myModal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabList: [{
					label: '全部',
					value: ''
				}, {
					label: '待付款',
					value: '0'
				}, {
					label: '待发货',
					value: '1'
				}, {
					label: '待收货',
					value: '2'
				}, {
					label: '已完成',
					value: '3'
				}],
				orderList: [],
				params: {
					keywords: '',
					page: 1,
					limit: 10,
					total: 0,
					status: ''
				},
				cancel: {
					show: false,
					info: {}
				}
			};
		},
		computed: {
			loadStatus() {
				if (this.orderList.length == 0) return ""
				if (this.orderList.length < this.params.total) return 'loadmore'
				if (this.orderList.length == this.params.total) return "nomore"
			}
		},
		onLoad({
			current
		}) {
			this.currentTab = current
			this.params.status = this.tabList[current].value
		},
		onShow() {
			this.onRefreshData()
		},
		methods: {
			// 获取订单列表
			getOrderList() {
				this.$api.get_order_list(this.params).then(res => {
					let {
						list,
						total
					} = res
					this.orderList = this.orderList.concat(list || [])
					this.params.total = total
				})
			},

			//重置数据
			async onRefreshData() {
				this.params.page = 1
				this.orderList = []
				await this.getOrderList()
			},

			changeTab(e) {
				let {
					value
				} = e
				this.params.status = value
				this.onRefreshData()
			},

			//跳转详情
			goDetails(orderNo) {
				uni.navigateTo({
					url: '/pages/order/detail?order_no=' + orderNo
				})
			},

			//取消订单
			cancelOrder(item) {
				this.cancel.show = true
				this.cancel.info = item
			},

			//确定取消订单
			confirmCancel() {
				this.$api.cancel_order({
					order_id: this.cancel.info.id
				}).then(res => {
					this.$showToast('已取消')
					this.cancel.show = false
					this.onRefreshData()
				})
			},

			//去支付
			goPay(item) {
				this.$u.debounce(() => {
					this.$api.pay_order({
						order_id: item.id,
						// #ifdef MP-WEIXIN
						client_type: 'Wechat'
						// #endif
						// #ifdef APP
						client_type: ' APP'
						// #endif
					}).then(data => {
						this.$util.payUtil(data).then(res => {
							uni.navigateTo({
								url: '/pages/cart/payResult'
							})
						})
					})
				}, 300)
			},

		},

		onPullDownRefresh() {
			this.onRefreshData()
			uni.stopPullDownRefresh()
		},

		onReachBottom() {
			if (this.orderList.length == this.params.total) {
				return
			}
			this.params.page++
			this.getOrderList()
		}
	}
</script>

<style>
	page {

		background-color: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 200rpx;
	}

	.search-box {
		padding: 24rpx 30rpx 18rpx;
		background-color: #F4F7F7;
		// position: fixed;
		// top: var(--window-top);
		// left: 0;
		// right: 0;
	}

	.tab-order {
		padding: 0 24rpx 18rpx;
		position: sticky;
		top: var(--window-top);
		z-index: 999;
		background-color: #F4F7F7;

		/deep/.u-tabs {
			margin: 0 auto;
		}
	}

	.order-list {
		padding: 0 24rpx;

		.order-item {
			background: #FFFFFF;
			box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.11);
			border-radius: 14rpx;
			margin-bottom: 18rpx;
			padding: 20rpx 28rpx 0 32rpx;

			.item-top {
				font-weight: 400;
				// font-size: 24rpx;
				font-size: calc(24rpx * 1.4);
				color: #666666;
				line-height: 32rpx;
			}

			.comp-product {
				padding: 20rpx 0;
				border-bottom: 1px solid #dddcdc;
			}

			.item-total {
				padding: 14rpx 0 18rpx;
				font-weight: 400;
				// font-size: 22rpx;
				font-size: calc(22rpx * 1.4);
				color: #666666;

				.price {
					font-weight: 500;
					// font-size: 32rpx;
					font-size: calc(32rpx * 1.4);
					color: #FF5800;
					margin-left: 12rpx;
				}
			}

			.item-btns {
				padding-bottom: 30rpx;

				.btn {
					width: 188rpx;
					height: 62rpx;
					background: #FFC046;
					border-radius: 35rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
					border: 1px solid #FFC046;

					&.link {
						background: #FFFFFF;
						color: #FFC046;
					}
				}
			}
		}
	}
</style>